<template>
  <div class="bot">
    <div class="nav">
       <el-input
        size="small"
        v-model="seach"
        placeholder="请输入内容"
      ></el-input>
      <el-button size="small" type="primary" @click="sampleList()">搜索</el-button>
    </div>
    <el-table
    :border = "true"
    :data="tableData"
    @cell-click = "huoqu"
    current-row-key= "tableData.id"
    style="width: 100%; height:80%">
      <el-table-column
        prop="brand"
        label="品牌"
        width="170">
      </el-table-column>
      <el-table-column
        prop="level"
        label="级别"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="150">
      </el-table-column>
       <el-table-column
        prop="unit"
        label="单位"
        width="150">
      </el-table-column>
      <el-table-column
        prop="place"
        label="地点"
        width="150">
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="创建日期"
        width="170">
      </el-table-column>
      <el-table-column
        prop="updatedAt"
        label="更新时间"
        width="170">
      </el-table-column>
      <el-table-column
        prop="product_id"
        label="编码"
        width="240">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="130">
        <template slot-scope="scope">
          <el-button
          @click="tiaozhuan(scope.$index, scope.row)"
            type="text"
            size="small">
            编辑
          </el-button>
          <el-button
          @click="pands"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      style="width: 600px;margin-left: 30%;"
      :page-sizes="[20, 40, 80]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="lenght">
    </el-pagination>
    <div class="mask" v-show="pand">
      <div class="pd">
        <el-button type="danger" @click="deleteRow()">确认</el-button>
        <el-button type="info" @click="pands()">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { sampleDeleteApi, sampleListlApi } from '../../../apis/samplApi'
export default {
  data () {
    return {
      tableData: [{}],
      seach: '',
      id: '',
      pand: false,
      name: '',
      lenght: 0
    }
  },
  created () {
    this.sampleList()
  },
  methods: {
    // 删除一条数据
    async deleteRow () {
      const result = await sampleDeleteApi(this.id)
      if (result.code !== 200) {
        this.$message({
          message: '删除失败',
          type: 'warning'
        })
      } else {
        this.$message({
          message: '删除完成',
          type: 'success'
        })
      }
      this.sampleList()
      this.pand = !this.pand
    },
    // 获取样品列表
    async sampleList () {
      const result = await sampleListlApi(this.seach)
      this.tableData = result.data.rows
      this.lenght = this.tableData.length
    },
    pands () {
      this.pand = !this.pand
    },
    huoqu (data) {
      console.log(data)
      this.id = data.id
      this.name = data.name
    },
    tiaozhuan (index, row) {
      this.$router.push({ path: '/product/sampleEdit', query: { row } })
    }
  }
}

</script>

<style lang="less" scoped>
.bot {
  width: 100%;
  height: 100%;
  padding: 10px;
  .nav {
    width: 40%;
    height: 70px;
    margin-left: 55%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    .el-button {
      width: 60px;
      height: 32px;
    }
    .el-input {
      width: 200px;
      margin-right: 20px;
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(112, 112, 112, 0.373);
    position: absolute;
    top: 0;
    left: 0;
    .pd {
      position: absolute;
      top: 20%;
      left: 40%;
      width: 300px;
      height: 80px;
      padding: 10px;
      background-color: #fff;
      display: flex;
      justify-content: space-evenly;
      > button {
        width: 80px;
        height: 40px;
        margin-top: 10px;
      }
    }
  }
}
</style>
